<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>本例用于测试background综合使用</title>
<style type="text/css">
body{
}
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}

.bgc{
	float:right;
	width:300px;
	height:200px;
	border:20px #FF0000 dotted;
	padding:20px;
	margin:20px;
	background:url(images/eg_bg_03.gif) no-repeat bottom;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	float:left;
	width:300px;
	height:200px;
	border:20px #FF0000 dotted;
	padding:20px;
	margin:20px;
	overflow:auto;
	background: #00F url(images/eg_bg_03.gif) no-repeat;
}
#bg1{
}
#bg2{
	background-position:-50px -50px !important;
}
#bg3{
	background:#000 !important;
}
#bg4{
}
#bg5{
	background-origin:border-box !important;
}
#bg6{
	background-origin:content-box !important;
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background的综合使用</div>
</div>
<div>以下用于测试background属性,在一个声明中设置所有的背景属性。</div>
<div id="body2">
	<div id="bg1">
    	<p>在一个声明中设置所有的背景属性。</p>
    </div>
	<div id="bg2">
    	<p>进行额外背景的再定义</p>
    </div>
    <div id="bg3">
    	<p>content-box,背景被裁剪到内容框。</p>
    </div>
</div>
<div>
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。<br/>
本例只是用于测试,滥用了!important,请不要这样使用。
</div>
</body>
</html>